<template>
  <Layout
    title="个人中心"
    :has-back="false"
    :has-tabbar="true"
    ref="layout"
    @updateCount="updateCount"
  >
    <view style="display: flex; flex-direction: column; padding: 20rpx">
      <view style="display: flex; align-items: center; column-gap: 20rpx">
        <u-image
          shape="circle"
          :src="avatar"
          width="100rpx"
          height="100rpx"
        ></u-image>
        <view>
          <u-text :text="name" type="primary" size="40rpx"></u-text>
        </view>
      </view>
      <view
        style="
          border-left: 2rpx solid #ebebec;
          border-right: 2rpx solid #ebebec;
          margin-top: 20rpx;
        "
      >
        <u-cell-group>
          <u-cell
            icon="bookmark"
            title="备忘列表"
            :clickable="true"
            :isLink="true"
            @click="cellClick('备忘列表')"
            :iconStyle="{ fontSize: '50rpx' }"
            :titleStyle="{ fontSize: '40rpx' }"
          >
            <template #right-icon>
              <view>
                <view style="display: flex; align-items: center">
                  <u-badge :value="noteCount"></u-badge>
                  <u-icon name="arrow-right"></u-icon>
                </view>
              </view>
            </template>
          </u-cell>
          <u-cell
            icon="bell"
            title="任务列表"
            :clickable="true"
            :isLink="true"
            @click="cellClick('任务列表')"
            :iconStyle="{ fontSize: '50rpx' }"
            :titleStyle="{ fontSize: '40rpx' }"
          >
            <template #right-icon>
              <view>
                <view style="display: flex; align-items: center">
                  <u-badge :value="taskCount"></u-badge>
                  <u-icon name="arrow-right"></u-icon>
                </view>
              </view>
            </template>
          </u-cell>
        </u-cell-group>
      </view>
    </view>
  </Layout>
</template>

<script>
import Layout from "@/pages/component/layout/index.vue";
export default {
  onShow() {
    this.$refs.layout.setTabbarStyle("个人中心");
  },
  components: {
    Layout,
  },
  data() {
    return {
      name: this.$store.state.name,
      avatar: this.$store.state.avatar,
      taskCount: 0,
      noteCount: 0,
    };
  },
  methods: {
    updateCount({ taskCount, noteCount }) {
      this.taskCount = taskCount;
      this.noteCount = noteCount;
    },
    async cellClick(name) {
      if (name === "备忘列表") {
        await uni.navigateTo({
          url: "/pages/note/index",
        });
      } else if (name === "任务列表") {
        await uni.navigateTo({
          url: "/pages/task/index",
        });
      }
    },
  },
};
</script>
